<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>高精度气象时空信息服务平台</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
</head>

<body>
<div class="page-container scroll-styled2">
    <div id="map">
        <div class="map-title-box">
            <center>
                <div class="map-title">
                    <span>高精度气象时空信息服务平台</span>
                </div>
            </center>
        </div>
        <div class="sign">
            <div class="weather-switch-not-selected" id="sign-in">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>登录</span>
            </div>
            <div class="weather-switch-not-selected" id="sign-up">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>注册</span>
            </div>
        </div>

        <div class="weather-switch-not-selected" id="box-control">
            <span class="weather-switch-corner weather-switch-corner-1"></span>
            <span class="weather-switch-corner weather-switch-corner-2"></span>
            <span class="weather-switch-corner weather-switch-corner-3"></span>
            <span class="weather-switch-corner weather-switch-corner-4"></span>
            <span id="box-control-button-text">隐藏窗口</span>
        </div>


        <div class="octagon-bg-box octagon-bg-box-left"></div>
        <div class="octagon-bg-box octagon-bg-box-right"></div>

        <div class="octagon-box" id="incident-info">
            <img src="./img/corner1.png" class="octagon-box-corner1">
            <img src="./img/corner2.png" class="octagon-box-corner2">
            <img src="./img/corner3.png" class="octagon-box-corner3">
            <img src="./img/corner4.png" class="octagon-box-corner4">
            <div class="octagon-box-border-top octagon-box-border"></div>
            <div class="octagon-box-border-bottom octagon-box-border"></div>
            <div class="octagon-box-title">
                <span>交通事件统计</span>
            </div>
            <div id="incident-chart"></div>
        </div>

        <div class="octagon-box" id="congestion-info">
            <img src="./img/corner1.png" class="octagon-box-corner1">
            <img src="./img/corner2.png" class="octagon-box-corner2">
            <img src="./img/corner3.png" class="octagon-box-corner3">
            <img src="./img/corner4.png" class="octagon-box-corner4">
            <div class="octagon-box-border-top octagon-box-border"></div>
            <div class="octagon-box-border-bottom octagon-box-border"></div>
            <div class="octagon-box-title">
                <span>道路拥堵指数TOP 10</span>
            </div>
            <div id="congestion-chart"></div>
        </div>

        <div class="octagon-box" id="weather-info">
            <img src="./img/corner1.png" class="octagon-box-corner1">
            <img src="./img/corner2.png" class="octagon-box-corner2">
            <img src="./img/corner3.png" class="octagon-box-corner3">
            <img src="./img/corner4.png" class="octagon-box-corner4">
            <div class="octagon-box-border-top octagon-box-border"></div>
            <div class="octagon-box-border-bottom octagon-box-border"></div>
            <div class="octagon-box-title">
                <span>天气预报</span>
            </div>
            <div id="weather-chart"></div>
        </div>

        <div class="octagon-box" id="alarm-info">
            <img src="./img/corner1.png" class="octagon-box-corner1">
            <img src="./img/corner2.png" class="octagon-box-corner2">
            <img src="./img/corner3.png" class="octagon-box-corner3">
            <img src="./img/corner4.png" class="octagon-box-corner4">
            <div class="octagon-box-border-top octagon-box-border"></div>
            <div class="octagon-box-border-bottom octagon-box-border"></div>
            <div class="octagon-box-title">
                <span><span id="alarm-container-name"></span>预警数量统计</span>
            </div>
            <div id="alarm-chart"></div>
        </div>
        <div class="weather-switch">
            <div class="weather-switch-not-selected" id="road-condition-button">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>实时路况</span>
            </div>
            <div class="weather-switch-not-selected" id="incident-button">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>事件</span>
            </div>
            <div class="weather-switch-not-selected" id="tem-button">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>温度</span>
            </div>
            <div class="weather-switch-not-selected" id="wins-button">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>风力</span>
            </div>
            <div class="weather-switch-not-selected" id="rh-button">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>能见度</span>
            </div>
            <div class="weather-switch-not-selected" id="pre-button">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>降水量</span>
            </div>
            <div class="weather-switch-not-selected" id="warn-button">
                <span class="weather-switch-corner weather-switch-corner-1"></span>
                <span class="weather-switch-corner weather-switch-corner-2"></span>
                <span class="weather-switch-corner weather-switch-corner-3"></span>
                <span class="weather-switch-corner weather-switch-corner-4"></span>
                <span>预警</span>
            </div>
        </div>
        <div id="timeline-box" style="display:none"></div>
        <div id="legend"></div>
        <div id="loading">
            <img src="./img/gears.gif" alt="Loading">
        </div>

        <!--maptype-->
        <div id="mapType-wrapper">
            <div id="mapType">
                <div class="mapTypeCard earth">
                    <div class="rectangle">卫星</div>
                    <!--<span>卫星</span>-->
                </div>
                <div class="mapTypeCard normal">
                    <div class="rectangle1">标准</div>
                </div>
            </div>
        </div>

        <div id="sign-in-mask">
            <section class="login-form-wrap">
                <form class="login-form" action="POST" action="#">
                    <label>
                        <input type="username" name="email" id="form-email" required placeholder="账号" value="admin">
                    </label>
                    <label>
                        <input type="password" name="password" id="form-password" required placeholder="密码" value="admin">
                    </label>
                    <button id="sign-in-submit">登录</button>
                    <button id="sign-up-submit">注册</button>
                </form>
                <button id="sign-in-close-button">X</button>
            </section>
        </div>
        <div id="user-info">
            <span class="user-info-icon"></span>
            <span>admin</span>
        </div>
    </div>
</div>
<script src="//minedata.cn/minemapapi/v1.3/minemap.js"></script>
<script src="//minedata.cn/minemapapi/demo/js/echarts-all-3.js"></script>

</body>

</html>